<script>
import config from '../config'
import Page from '../components/Page.vue'
import SearchControl from '../components/SearchControl.vue'

export default {
  name: 'ArticlesView',
  data() {
    return {
      cdn: config.cdn,
      banner: {},
      articles: [],
      newArticles: [],
      page: {},
      modules: []
    }
  },

  computed: {
    adBanner() {
      return {
        'address': this.banner.address,
        'imgSrc': 'http://image.fit-start.co/news_ad.png'
      }
    },

    currentPage() {
      return Number(this.$store.state.route.query.page) || 1
    },

    currentModule() {
      return this.$store.state.route.query.m
    },

    q() {
      return this.$store.state.route.query.q
    },

    query() {
      return {
        page: this.currentPage,
        m: this.currentModule,
        q: this.q
      }
    },

    isAllModule() {
      return !this.currentModule
    }
  },

  components: {
    Page,
    SearchControl
  },

  watch: {
    currentPage() {
      this.loadData(this.query)
    },

    currentModule() {
      this.loadData(this.query)
    },

    q() {
      this.loadData(this.query)
    }
  },

  methods: {
    loadData(query) {
      var that = this;
      that.$store
        .dispatch('FETCH_ARTICLE_DATA', { params: query })
        .then(() => {
          that.articles = that.$store.state.article.articles
          that.modules = that.$store.state.article.modules
          that.page = that.$store.state.article.page
          that.$store
            .dispatch('FETCH_NEW_ARTICLE', { params: query })
            .then(() => {
              console.log(that.$store.state.article.newArticles);
              that.newArticles = that.$store.state.article.newArticles
            })    
        })
    },

    loadPageConfig() {
      this.$store
        .dispatch('FETCH_PAGE_CONFIG', { page: 'article' })
        .then(data => this.banner = data.link_article_list[0])
    },

    changeQueryName(value) {
      this.changeQuery('q', value)
    },

    changeQuery(key, value) {
      let query = this.query
      query[key] = value
      this.updateQuery(query)
    },

    updateQuery(query) {
      let queryString = Object.keys(query)
        .filter(key => !!query[key])
        .map(key => `${key}=${query[key]}`)
        .join('&')
      let url = queryString ? `${this.$route.path}?${queryString}` : this.$route.path
      this.$router.push(url)
    }
  },
  
  beforeMount() {
    this.loadData(this.query)
    this.loadPageConfig()
  }
}
</script>

<template>
  <div class="container events clearfix" id="articles-view" style="margin-top: 0;">

    <!-- <a class="ad" :href="adBanner.address">
      <img :src="adBanner.imgSrc" >
      <button class="close-btn hide"></button>
    </a>-->
    <div class="clearfix">
      <div class="pull-left list-wrap">
        <div class="articles-toolbar">
        
          <!-- <search-control :value="q"
            :placeholder="'马甲线/腹肌/瘦腿'"
            @searchcontrol-change="changeQueryName">
          </search-control> -->
          
          <div class="button-group">
            <a class="btn" :class="{ 'active': isAllModule }" @click="changeQuery('m')">全部</a>
            <a v-for="module in modules"
              :class="{ 'active': module.id == currentModule }"
              @click="changeQuery('m', module.id)" class="btn">
              {{ module.name }}
            </a>
          </div>
        </div>
    
        <ul class="articles-list list clearfix">
          <li v-for="article in articles" class="item">
            <a :href="article.link" target="_blank" class="articles-item">
              <img :src="`${cdn}/${article.cover}-0.6`" >
              <span class="title">{{ article.name }}</span>
            </a>
          </li>
        </ul>
    
        <!-- pagination -->
        <page :prePage="page.prePage"
          :prePages="page.prePages"
          :currentPage="page.currentPage"
          :nextPage="page.nextPage"
          :nextPages="page.nextPages">
        </page>
      </div>
      
      <div class="pull-left selected-article">
        <div class="block-title"><span style="font-weight: 600;">精选文章&nbsp;|</span>&nbsp;Features</div>
        <div class="box">
          <div class="item" v-for="article in newArticles">
            <a :href="article.link">
              <img :src="`${cdn}/${article.cover}-0.6`" >
              <p class="title">{{ article.name }}</p>
              <div class="date"><span class="label">new</span>&nbsp;{{article.createTime}}</div>
            </a>
          </div>
        </div>
      </div>
    </div>
  
  </div>
</template>

<style>
@import '../../static/styles/articles.css';
</style>